<template>
  <div id="tmpl">
    <div class="mui-content" id="mui-content" style="background-color:#fff">
      <ul class="mui-table-view mui-grid-view">
        <li class="mui-table-view-cell mui-media mui-col-xs-6" v-for="item in list">
          <router-link v-bind="{to:'/goods/getdesc/'+item.id}">
            <img class="mui-media-object" :src="item.img_url">
            <div class="mui-media-body">
              <p v-text="item.title"></p>
            </div>
            <div class="pro-mess">
              <p class="price"><span>&yen;{{item.sell_price}}</span>
                <del>&yen;{{item.market_price}}</del>
              </p>
              <p class="hot"><span>热卖中</span> <span>剩{{item.stock_quantity}}件</span></p>
            </div>
          </router-link>
        </li>
      </ul>
    </div>
    <mt-button type="danger" size="large" plain @click="getmore" v-text="tip"></mt-button>
  </div>
</template>
<script>
  import common from '../../kits/common.js'
  import {
    Toast
  } from 'mint-ui';
  export default {
    data() {
      return {
        list: [],
        pageindex:1,
        tip:"点击加载更多"
      }
    },
    created() {
      this.getgoods();
    },
    methods: {
      getgoods: function () {
        var url = common.apidomain + '/api/getgoods?pageindex='+this.pageindex;
        this.$http.get(url).then(function (res) {
          console.log(res)
          var body = res.body;
          if(body.message.length==0){
            this.tip="已经没有更多内容了"
          }
          if (body.status != 0) {
            Toast(body.message);
            return;
          }
          this.list=this.list.concat(body.message);
        })
      },
      getmore(){
        this.pageindex+=1;
        this.getgoods();
      }
    }

  }
</script>
<style scoped>
  .mui-table-view.mui-grid-view .mui-table-view-cell .mui-media-body {
    height: auto;
  }

  .pro-mess {
    margin-top: 5px;
    width: 100%;
    height: 60px;
    background-color: rgba(0, 0, 0, .1);
  }

  .pro-mess p {
    text-align: left;
  }

  .pro-mess .price span {
    color: red;
  }

  .pro-mess .price del {
    margin-left: 20px;
    font-size: 12px;
    color: #777;
  }

  .pro-mess .hot {
    margin-top: 20px;
    font-size: 12px;
    color: #999;
  }

  .pro-mess .hot span:nth-of-type(1) {
    float: left;
    margin-left: 10px;
  }

  .pro-mess .hot span:nth-of-type(2) {
    float: right;
    margin-right: 10px;
  }

  .pro-mess p span:nth-of-type(2) {
    margin-left: 30px;
  }
  /*图文表格  */

  #mui-content li {
    border: 1px solid rgba(0, 0, 0, .4);
    margin-left: 4px;
    padding-left: 0px;
    padding: 5px;
  }

  #mui-content li a {
    padding-left: 0px;
    margin-left: 0px;
  }

    .mui-table-view-cell>a:not(.mui-btn) {
    white-space: normal;
  }  

  #mui-content .mui-media-body p {
    color: #0094ff;
    text-align: left;
    max-height: 30px;
  }
</style>